<template>
    <div class="stu">
        <h1>学生管理系统</h1>
        <p>学生列表如下，请选择您需要的操作：</p>
        <div>
            <span>学号：</span>
            <input type="text" placeholder="请输入要添加的学号" v-model="newPerson.no">
        </div>
        <div>
            <span>姓名：</span>
            <input type="text" placeholder="请输入要添加的姓名" v-model="newPerson.name">
        </div>
        <div>
            <span>年龄：</span>
            <input type="text" placeholder="请输入要添加的年龄" v-model="newPerson.age">
        </div>
        <div>
            <span>性别：</span>
            <select name="" id="" v-model="newPerson.sex">
                <option value="男">男</option>
                <option value="女">女</option>
            </select>
        </div>
        <div>
            <button @click="createPerson()">添加学生信息</button>
        </div>
        <br>
        <div>
            <button @click="select()">查询当前学生信息</button>
        </div>
        <br>
        <table class="biao">
            <thead>
            <tr>
                <td>学号</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>性别</td>
                <td>删除</td>
            </tr>
            </thead>
            <tbody>
            <tr v-for="(p,index) in person">
                <td>{{p.no}}</td>
                <td>{{p.name}}</td>
                <td>{{p.age}}</td>
                <td>{{p.sex}}</td>
                <td>
                    <button @click="deletePerson(index)">删除</button>
                </td>
                <td>
                    <button @click="updataPerson(index)">修改</button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
    export default {
        name: "student",
        data: function () {
            return {
                respText: '',
                person: [
                    {no: '1', name: '呆小瓜', age: '12', sex: '男',},
                    {no: '2', name: '大聪明', age: '11', sex: '女',}
                ],
                newPerson: {no: '', name: '', age: '', sex: '',}
            }
        },
        methods: {
            createPerson(){
                if (this.newPerson.no === '') {
                    alert('学号不能为空哦');
                    return;
                }
                if (this.newPerson.name === '') {
                    alert('姓名不能为空哦');
                    return;
                }
                if (this.newPerson.age <= 0) {
                    alert('请输入正确年龄');
                    return;
                }
                if (this.newPerson.sex === '') {
                    alert('性别不能为空哦');
                    return;
                }
                // 添加
                this.person.push(this.newPerson);
                // 清空
                this.newPerson = {no: '', name: '', age: '', sex: ''}
            },
            deletePerson(index) {
                this.person.splice(index, 1);
            },
             //修改
            updataPerson(index) {
                this.selected = index;
                this.isActive = true;
            }
        }
    }

</script>

<style scoped>
    .stu {
        background-color: aqua;
        text-align: center;
    }
    .biao{
        background-color: black;
        text-align: center;
        font-family: "楷体";
        color: white;
    }
</style>